<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar :title="`购物车()`" left-text="返回" left-arrow @click-left="onClickLeft" />

        <div class="list-container">

            <!-- 商品列表 -->
            <!-- <van-empty description="暂无商品" /> -->
            <!-- v-if="cartList?.length === 0" -->
            <!-- <van-empty description="购物车无内容" >
          <van-button
            round
            type="danger"
            @click="$router.push('/')"
            class="bottom-button"
          >
            立即购物
          </van-button>
        </van-empty> -->

            <!-- v-for="item in cartList" :key="item.proid" -->
            <van-swipe-cell v-for="item in cartList" :key="item.proid">
                <div class="cell-left">
                    <van-checkbox @click="handleSelectOne(item.cartid, item.flag)" v-model="item.flag"></van-checkbox>
                    <van-card tag="标签" :num="item.num" :price="item.originprice" :title="item.proname"
                        :thumb="item.img1" :thumb-link="`/#/details/${item.proid}`">
                        <!-- <template #left> left </template> -->
                        <template #num>
                            <!--   :name="item.cartid"  是 框架给我们的 不能换  -->
                            <van-stepper v-model="item.num" theme="round" :name="item.cartid" button-size="22"
                                @change="handleChangeGoodNum" disable-input />
                        </template>
                    </van-card>
                </div>
                <template #right>
                    <van-button square text="删除" @click="handleDeleteGood(item.cartid)" type="danger"
                        class="delete-button" />
                </template>
            </van-swipe-cell>

            <!-- 立即购买 -->
            <van-submit-bar :price="totalPrice" button-text="去结算" @submit="onSubmit">
                <van-checkbox @click="handleSelectAll" v-model="checked"> 全选 </van-checkbox>
                <!-- <template #tip>
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span>
        </template> -->
            </van-submit-bar>

        </div>
    </div>
</template>

<script setup lang="ts">
// 1  返回 是路由的跳转
import { useRouter } from 'vue-router'

import { useCart } from '@/hooks/useCart'

import { computed } from 'vue'


const router = useRouter()

const onClickLeft = () => {
    router.back()
}


//购物车逻辑
const { handleSelectOne, cartList, handleChangeGoodNum, handleDeleteGood, checked,

    handleSelectAll,
    totalPrice

} = useCart()
console.log(cartList);





const onSubmit = () => { }






</script>




<style lang="scss" scoped>
.goods-card {
    margin: 0;
    background-color: #fff;
}

.delete-button {
    height: 100%;
}
</style>

<style lang="scss" scoped>
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: yellowgreen;

    .list-container {
        flex: 1;

        .van-swipe-cell {
            .cell-left {
                display: flex;

                .van-checkbox {
                    width: 80px;
                    box-sizing: border-box;
                    padding-left: 25px;
                }

                .van-card {
                    flex: 1;
                }
            }
        }
    }

    .goods-card {
        margin: 0;
        background-color: #fff;
    }

    .delete-button {
        height: 100%;
    }
}
</style>

